<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu default-active="2" @open="handleOpen" @close="handleClose">
                <div v-for="(item, i) in menus">
                    <!-- 有下拉菜单 -->
                    <el-sub-menu :index="item.index" v-if="item?.childs">
                        <template #title>
                            <el-icon>
                                <!-- <location /> -->
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{ item.text }}</span>
                        </template>
                        <!-- 子菜单 -->
                        <el-menu-item-group v-for="opt in item.childs" :title="opt.title">
                            <el-menu-item v-if="opt?.arr" v-for="obj in opt.arr" :index="obj.index"
                                @click="addTabEvent(obj.name, obj.id, obj.path)">{{ obj.name }}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <!-- 没有下拉菜单 -->
                    <el-menu-item :index="item.index" v-else @click="addTabEvent(item.name, item.id, item.path)">
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.text }}</span>
                    </el-menu-item>
                </div>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
// import { ref } from 'vue'
// 导入storeToRefs函数
import { storeToRefs } from 'pinia'
import { useRouter, useRoute } from 'vue-router'

// 导入 “tab” 数据存储模块
import { useTabStore } from '../stores/tabBar'
import { useMenuStore } from '../stores/menu'
// 获取“tab”存储对象
const tabStore = useTabStore()
// 获取“menu”储存对象
const menuStore = useMenuStore()
// 获取pinia储存中的“菜单”数组
let { menus } = storeToRefs(menuStore)
// 获取路由实例对象
const $router = useRouter();
// 点击 “侧栏菜单” 在右侧内容区域显示
const addTabEvent = (name: string, id: string, path: string) => {
    // 添加顶部栏的导航
    tabStore.add({ name, id, path })
    // console.log("URL:",path)
    // 路由跳转组件
    $router.push({ path })
}

const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}

// 刷新页面也能看到这个topbar的导航文本
// console.log($router);
const $route = useRoute();
const path = $route.path;
let data = menus.value;
let opt: any = {}
// console.log($route.path)
// console.log(menus)
for (let i = 0; i < data.length; i++) {
    if (data[i].childs) {
        // 继续循环
        let childs: any = data[i].childs;
        for (let j = 0; j < childs.length; j++) {
            if (childs[j].arr) {
                let arr = childs[j].arr
                for (let k = 0; k < arr.length; k++) {
                    if (arr[k].path == path) {
                        // console.log("111")
                        opt.name = data[i].name;
                        opt.id = data[i].id;
                        break;
                    }
                }
            }
        }
    }
    else {
        if (data[i].path == path) {
            opt.name = data[i].name;
            opt.id = data[i].id;
            break;
        }
    }
}

// 初始化
if (path != "/") {
    tabStore.add(opt)
}

</script>